<template>
	<div class="bigbox">
		<div class="box">
			<el-row>
				<el-col :span="6">
					<dv-decoration-8 class="title_right" :color="['#008CFF', '#00ADDD']" />
				</el-col>
				<el-col :span="12">
					> <div class="title_text">数 据 可 视 化 系 统</div>
					<dv-decoration-5 class="title_center" :color="['#008CFF', '#00ADDD']" />
				</el-col>
				<el-col :span="6">
					<dv-decoration-8 :reverse="true" class="title_left" :color="['#008CFF', '#00ADDD']" />
				</el-col>
			</el-row>
			<div class="topbox">

				<div class="top">
					<!-- 第一列 -->
					<div class="left_box1">
						<dv-border-box-12>
							<div id="Rose_diagram"></div>
							<!-- <dv-active-ring-chart :config="config" class="left_box1_rose_right"
								style="display: none;" /> -->
							<div ref="InOutAll" class="left_box1_rose_right">
							</div>

						</dv-border-box-12>
					</div>
					<!-- //出入库 -->
					<div class="left_box1">
						<dv-border-box-12>
							<div ref="Inbound" class="w100 w550"
								style="height: 90%;width: 100%;position: absolute;left: 0px;top: 15px;"></div>
						</dv-border-box-12>
					</div>

					<!-- 会员 -->
					<div class="left_box1">
						<dv-border-box-12>
							<div class="w100" ref="vip"
								style="height: 90%;width: 100%;position: absolute;left: 0px;top: 15px;">
							</div>
						</dv-border-box-12>
					</div>
				</div>
			</div>
			<div class="centerbox">
				<div class="centertop">
					<!-- 库存 -->
					<el-table :data="productList" :row-class-name="tableRowClassName" :cell-style="cellStyle">
						<el-table-column label="图片" align="center" prop="image">
							<el-image slot-scope="scope" :src="ApiUrl+scope.row.image"></el-image>
						</el-table-column>
						<el-table-column label="名称" align="center" prop="productName" />
						<el-table-column label="总登记号" align="center" prop="registrationNumber" />
						<el-table-column label="rfid编号" align="center" prop="rfidNumber" />
						<el-table-column label="分类号" align="center" prop="productTypeIdName" />
						<el-table-column label="分类号详情" align="center" prop="categoryNumber" />
						<el-table-column label="年代" align="center" prop="eraName" />
						<el-table-column label="方位" align="center" prop="warehouseIdNmae" />
						<el-table-column label="方位详情" align="center" prop="orientation" />
						<el-table-column label="数量" align="center" prop="quantity" />
						<el-table-column label="完残程度" align="center" prop="completenessName" />
						<el-table-column label="藏品级别" align="center" prop="collectionLevelName" />
						<el-table-column label="审核人" align="center" prop="approverName" />
						<el-table-column label="质地" align="center" prop="material" />
						<el-table-column label="登录人" align="center" prop="createByName" />
						<el-table-column label="藏品状态" align="center" prop="productStatus" >
							<template slot-scope="scope">
								<span style="color: #ff0000;" v-if="scope.row.productStatus=='未入库'">未入库</span>
								<span style="color: green;" v-if="scope.row.productStatus=='在库'">在库</span>
								<span style="color: orange;" v-if="scope.row.productStatus=='已出库'">已出库</span>
								<span style="color: #ff0000;" v-if="scope.row.productStatus=='非法出库'">非法出库</span>
								<span style="color: #ff0000;" v-if="scope.row.productStatus=='非法入库'">非法入库</span>
							</template>
						</el-table-column>
						<el-table-column label="发卡状态" align="center" prop="fkStatus"  >
							<template slot-scope="scope">
								<span style="color: #ff0000;" v-if="scope.row.fkStatus=='未发卡'">未发卡</span>
								<span style="color: green;" v-if="scope.row.fkStatus=='已发卡'">已发卡</span>
							</template>
						</el-table-column>
					</el-table>
					<div style="width: 100%;padding: 15px;height: 100px;">
						<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
							:limit.sync="queryParams.pageSize" @pagination="getList" />
					</div>

				</div>
				<!-- <div class="center">
					<div class="leftbox">
						<div class="left" ref="sale"></div>
					</div>
					<div class="rightbox">
						<div class="right">
							<div class="righttitle" style="color: #fff;" ref="aske">类别资产数量
							</div>
							<div class="rightcenter">
								<dv-scroll-board :config="config" />
							</div>
						</div>
					</div>
					<div style="width: 30px;">

					</div>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import {
		getNumber,
		listType,
		listProduct,
		GetSalNum,
		GetPrfNum
	} from "../api/indexData.js";
	import {
		constantRoutes
	} from '../router/index.js';
	export default {
		data() {
			return {
				// Api
				ApiUrl: process.env.VUE_APP_BASE_API,
				activeName: 'first',
				askename: '库存不足预警',
				//物料库存数据
				MaterialData: [],
				//会员数据
				VipData: [],
				//颜色数组
				ColorList: ['#37a2da', '#9fe6b8', '#67e0e3', '#32c5e9', '#ffdb5c'],
				//入库数据
				InData: [],
				//出库数据
				OutData: [],
				//销售额和采购额数据
				SalNum: [],
				config: {
					header: [],
					data: []
				},
				sales: "",
				Purchaseamount: "",
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				// 总条数
				total: 0,
				productList: [],
				InOutData: []
			}
		},

		methods: {
			cellStyle(){
				return "color:#fff";
			},
			 
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 0) {
					return 'warning-row';
				} else {
					return 'success-row';
				}
			},
			// 销售额
			sale() {
				var myChart = echarts.init(this.$refs.sale);
				var option;
				option = {
					// backgroundColor: '#fff',
					tooltip: {
						trigger: 'axis',
						lineStyle: {
							color: '#fff',
						},
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							margin: 5,
							textStyle: {
								fontSize: 14,
								color: '#fff',
							},
						},
						axisLine: {
							lineStyle: {
								color: '#fff',
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								type: 'solid',
								color: '#fff',
							},
						},
						data: [this.$t('January'), this.$t('February'), this.$t(
								'March'), this.$t('April'), this.$t(
								'May'), this.$t('June'), this.$t('July'), this.$t('August'), this.$t(
								'September'),
							this.$t('October'), this.$t('November'), this.$t('December')
						],
					}, ],
					yAxis: [{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: "#fff"
							}
						}
					}],
					series: [{
						type: 'line',
						showSymbol: false,
						smooth: true,
						symbol: 'circle',
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						barWidth: '60%',
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: 'rgb(1, 103, 255)',
										},
										{
											offset: 1,
											color: 'rgb(1, 103, 255, 0.1)',
										},
									],
									false
								),
							},
						},
						itemStyle: {
							normal: {
								color: 'rgb(1, 103, 255)',
							},
						},
						data: this.SalNum,
					}, ]
				};
				option && myChart.setOption(option);
			},
			// 今日入库领用
			Inbound() {
				var myChart = echarts.init(this.$refs.Inbound);
				var option;
				option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},

					title: {
						text: "今日入库/今日领用统计",
						left: 'center',
						padding: [10, 100, 100, 100],
						textStyle: {
							color: '#fff',
							fontWeight: 'bold',
							fontSize: 22
						}
					},
					legend: {
						data: ["今日入库数", "今日领用数"],
						padding: [80, 200, 100, 100],
						textStyle: {
							color: "#fff"
						}
					},
					xAxis: [{
						type: 'category',
						data: ["今日入库数", "今日领用数"],
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						}
					}],
					yAxis: [{
						type: 'value'
					}],

					series: [{
							name: '数量',
							type: 'bar',
							barWidth: '40%',
							data: this.InOutData

						},

					]
				};
				option && myChart.setOption(option);
			},
			// 物料存储
			material() {
				var myChart = echarts.init(this.$refs.InOutAll);
				var option;
				option = {
					title: {
						text: "库存/领用总计",
						left: 'center',
						padding: [40, 100, 100, 100],
						textStyle: {
							color: '#fff',
							// fontWeight: 'bold',
							fontSize: 22
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: "{b} : {c}个 ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						padding: [60, 10, 10, 20],
						textStyle: {
							color: "#fff"
						}
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['20%', '50%'],

						center: ['50%', '60%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							// borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: true,
							position: 'outside',
							formatter: '{b}{c}个'
						},
						labelLine: {
							//引导线设置
							normal: {
								show: true, //引导线显示
								length: 20,
								length2: 20
							}
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '17',
								// fontWeight: 'bold'
							}
						},

						data: this.MaterialData
					}]
				};
				option && myChart.setOption(option);
			},

			//会员
			vip() {
				var myChart = echarts.init(this.$refs.vip);
				var option;
				option = {
					title: {
						text: "资产类别汇总",
						left: 'center',
						padding: [40, 100, 100, 100],
						textStyle: {
							color: '#fff',
							fontWeight: 'bold',
							fontSize: 22
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: "{d}%"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						padding: [60, 10, 10, 20],
						textStyle: {
							color: "#fff"
						}
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['20%', '50%'],

						center: ['50%', '60%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							// borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: true,
							position: 'outside',
							// formatter: '{b}{c}位'
						},
						labelLine: {
							//引导线设置
							normal: {
								show: true, //引导线显示
								length: 20,
								length2: 20
							}
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '17',
								fontWeight: 'bold'
							}
						},

						data: this.VipData
					}]
				};
				option && myChart.setOption(option);
			},

			// center标题点击监听
			handleClick(tab, event) {
				console.log("tabs", tab)
				if (tab.index == "1") {
					//获取采购额
					this.GetprfNum();
				} else {
					//获取销售额
					console.log("获取销售额")
					this.GetsalNum();
				}
				// if (event.path[0].innerHTML == this.$t('Purchaseamount')) {
				// 	//获取采购额
				// 	this.GetprfNum();
				// } else {
				// 	//获取销售额
				// 	console.log("获取销售额")
				// 	this.GetsalNum();
				// }
			},
			removeel() {
				document.getElementsByClassName("el-tabs__content")[0].remove()
			},
			/** 查询用于存储资产信息的列表 */
			getList() {
				listProduct(this.queryParams).then(response => {
					console.log("资产列表", response)
					this.productList = response.rows;
					this.total = response.total;

				});
			},
			//获取类别
			Getmaterial() {
				var that = this;
				listType().then(response => {
					console.log(response)
					var List = [];
					List = response.rows;
					List.forEach(function(item) {
						that.VipData.push({
							"name": item.productTypeName,
							"value": 1
						})
					});
					that.vip();
				});
			},
			//获取会员
			// GetNumber() {
			// 	var that = this;
			// 	getNumber().then(response => {
			// 		console.log("入库和领用数据",response)
			// 		// that.VipData = response.data
			// 		// that.VipData.forEach(function(item, index) {
			// 		// 	item.itemStyle = {
			// 		// 		color: that.ColorList[index % 6]
			// 		// 	};
			// 		// });
			// 		// that.vip();
			// 	});
			// },
			//获取今日入库领用
			Getinbound() {
				var that = this;
				getNumber().then(response => {
					console.log("今日领用库存", response)
					that.InOutData[0] = response.data.zaikulistjr
					that.InOutData[1] = response.data.yllistjr
					that.MaterialData.push({
						"name": "库存总计",
						"value": response.data.zaikulist
					}, {
						"name": "领用总计",
						"value": response.data.yllist
					})
					// that.InData = response.data.zaikulistjr;
					// that.OutData = response.data.yllistjr;
					console.log("领用库存数据", that.InData)
					that.Inbound();
					that.material();
				});
			},
			//获取销售额 
			GetsalNum() {
				var that = this;
				GetSalNum().then(response => {
					console.log(response)
					that.SalNum = response.data
					that.sale();
				});
			},
			//获取采购额
			GetprfNum() {
				var that = this;
				GetPrfNum().then(response => {
					console.log(response)
					that.SalNum = response.data
					that.sale();
				});
			},
		},

		created: function() {

		},
		mounted() {
			var that = this;
			// console.log("首页数据",constantRoutes[constantRoutes.length - 1].children[0].meta.title)
			// constantRoutes[constantRoutes.length - 1].children[0].meta.title = this.$t('Home')

			var List = [];
			List[0] = "资产名称";
			List[1] = "资产类别";
			List[2] = "资产位置";
			that.config = {
				header: List,
				data: []
			}
			// 获取库存
			that.getList();
			//获取类别
			that.Getmaterial();
			//获取会员
			// that.GetNumber();
			//获取今日入库领用统计
			that.Getinbound();
			//获取销售额
			// that.GetsalNum();
			that.removeel();
			that.sales = "123";;
			that.Purchaseamount = "456";
		},



	}
</script>

<style  >
	.el-tabs__item {
		color: white !important;
	}

	.is-active {
		color: #007dff !important;
	}

	.bigbox {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-image: url('../assets/images/HomeBack.png');
		padding: 16px 16px 0 16px;
		background-size: cover;
		background-position: center center;
	}

	.box {
		width: 100%;
		height: 100%;
	}

	.topbox {
		height: 400px;
		width: 100%;
	}

	.top {
		margin-left: 8px;
		display: flex;
		justify-content: space-between;
		height: 100%;
	}

	.top .w100 {
		/* background-color: #fff; */
		border-radius: 20px;
		width: 500px;
		margin: 5px;
		flex: 1;
		z-index: 999;
	}

	.centerbox {
		height: 100%;
		/* margin: 20px 0px 0 13px; */
		background-color: #fff;
		border-radius: 20px;
	}

	.center {
		height: 391px;
		display: flex;
	}

	.leftbox {
		flex: 2.7;
		width: 1300px;
	}

	.rightbox {
		flex: 1;
		width: 500px;
	}


	.centertop {
		margin: 0px 10px;
		padding: 20px 20px 20px 0px;
		height:100%;
		width: 100%;
	}

	.left {
		width: 100%;
		height: 100%;
	}

	.right {
		width: 451.34px;
		height: 100%;
	}

	.righttitle {
		color: rgba(0, 0, 0, .85);
		font-size: 24px;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.salecenter:nth-child(-n+3) span {
		background: #000;
		/* color: #fff; */
	}

	.salecenter {
		display: flex;
		margin: 10px 0 17px 0;
	}

	.salecenter span {
		width: 20px;
		height: 20px;
		margin-top: 1.5px;
		margin-right: 30px;
		font-weight: 600;
		font-size: 16px;
		line-height: 20px;
		text-align: center;
		background-color: #fafafa;
		border-radius: 20px;
	}

	.salename {
		flex: 0.55;
		color: rgba(0, 0, 0);
		font-size: 16px;
		line-height: 22px;
	}

	.salenum {
		flex: 0.3;
		color: rgba(0, 0, 0);
		font-size: 16px;
		line-height: 22px;
	}

	.salenum {
		overflow: auto;
	}

	.rightcenter {
		display: flex;
		flex-direction: column;
		overflow: auto;
		height: 349px;
	}

	.ant-card-body {
		padding: 0 !important;
	}

	.calender {
		width: 100% !important;
		position: relative !important;
		margin: 0 !important;
		padding: 0px !important;
	}

	.ant-card {
		background: none;
	}

	.table-page-search-wrapper .ant-form-inline .ant-form-item {
		margin: 0 !important;
		width: 140px !important;
		align-self: flex-end;
	}

	.ant-btn .ant-btn-primary {
		margin-left: 10px !important;
	}

	.table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control-wrappe {
		flex: 0 !important;
		display: inline-block !important;
		vertical-align: middle !important;
	}

	/* //左1模块 */
	.left_box1 {
		width: 100%;
		margin-bottom: 10px;
		position: relative;
	}

	/* //左1模块-圆环图 */
	.left_box1_rose_right {
		height: 90%;
		width: 100%;
		position: absolute;
		left: 00px;
		top: 15px;
	}

	/* //顶部中间文字数据可视化系统 */
	.title_text {
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		margin-top: 14px;
		color: #008cff;
	}

	/* //顶部左边装饰效果 */
	.title_right {
		width: 100%;
		height: 50px;
		margin-top: 18px;
	}

	/* //顶部右边装饰效果 */
	.title_left {
		width: 100%;
		height: 50px;
	}

	.el-table .success-row {
		background: #003b51;
	}

	.el-table .warning-row {
		background: #0b2732;
	}
 
 
</style>